<template>
	<view class="washService">
		<!-- 门店详情 -->
		<view class="storeDetails">
			<!-- 门店图片 -->
			<view class="storeImgBox">
				<image src="../../static/img-maoao/images/mendian.png" mode="" class="storeImg"></image>
			</view>
			<!-- 门店文字信息 -->
			<view class="storeTextInfo">
				<view class="storeTitle">
					<view class="storeName">
						<text>卡尔养车(孵化园店)</text>
					</view>
					<view class="storeTime">
						<text>营业时间 09:00-20:00</text>
					</view>
				</view>
				<view class="storeIntro">
					<!-- 门店评价和地址距离 -->
					<view class="storeEvaluateAndInstance">
						<view class="storeEvaluate">
							<!-- 服务费 服务次数 -->
							<text class="servicePoints">5.0</text>分<text class="marLeft">超棒</text><text
								class="marLeft">服务次数1000单</text>
						</view>
						<view class="storeInstance">
							<text>距您3.22km</text><text class="line">|</text><text>武侯区天府大道北段1288号</text>
						</view>
					</view>
					<!-- 导航按钮和拨打电话按钮 -->
					<view class="addressAndTel">
						<!-- 地址图标 -->
						<view class="addressIcon"> </view>
						<!-- 拨打电话图标 -->
						<view class="telIcon"> </view>
					</view>
				</view>
			</view>
		</view>
		<!-- 顾客车辆信息 -->
		<view class="carInfo">
			<view class="carInfoBox">
				<!-- 车图片 -->
				<view class="carImg"> </view>
				<!-- 车文字信息 -->
				<view class="carText">
					<view class="carName"> 沃尔沃进口-XC90 </view>
					<view class="carType">
						<text>2021款</text><text class="marLeft">2.0T</text><text class="marLeft">自动</text> <text
							class="marLeft">T8</text><text class="marLeft">至尊豪华版7座</text>
					</view>
				</view>
				<!-- 切换车辆 -->
				<view class="changeCar">
					<image src="../../static/img-maoao/icons/genghuan@2x.png" mode="" class="changeCarImg"></image><text
						class="changeCarText">换车</text>
				</view>
			</view>
		</view>
		<!-- 服务列表 -->
		<view class="serviceList">
			<view class="serviceListBox">
				<view class="navs">
					<view class="navsText"> 精选服务 </view>
					<view class="navsText"> 优惠套餐 </view>
				</view>
				<!-- 选择服务主体 -->
				<view class="serviceContent">
					<view class="leftList">
						<view class="leftListItem" v-for="(item, index) in server_list" :key="item"
							:class="{ titleChecked: index == checkedNum }" @click="checkedNum = index">
							{{ item }}
						</view>
					</view>
					<view class="rightSelector">
						<view class="rightList">
							<view class="rightListBox" @tap="showSubNav">
								<view class="rightListText">标准洗车</view>
								<view class="rightListIcon" :class="{ rightListIconTransform: isShowSubNav }">></view>
							</view>
							<radio-group name="normalWash" class="rightItemBox"
								:class="{ showRightItemBox: isShowSubNav }">
								<view class="item">
									<view class="radio">
										<radio class="radioSize" value="" /><text>小轿车</text>
									</view>
									<view class="priceText">￥<text>40</text></view>
									<view class="getButton"><text class="getButtonText">抢购</text></view>
								</view>
								<view class="item">
									<view class="radio">
										<radio class="radioSize" value="" /><text>越野/SUV</text>
									</view>
									<view class="priceText">￥<text>50</text></view>
									<view class="getButton"><text class="getButtonText">抢购</text></view>
								</view>
								<view class="item">
									<view class="radio">
										<radio class="radioSize" value="" /><text>商务/MPV</text>
									</view>
									<view class="priceText">￥<text>80</text></view>
									<view class="getButton"><text class="getButtonText">抢购</text></view>
								</view>
							</radio-group>
							<view class="rightListBox" @tap="showSubNav">
								<view class="rightListText">快速洗车</view>
								<view class="rightListIcon" :class="{ rightListIconTransform: isShowSubNav }">></view>
							</view>
							<radio-group name="normalWash" class="rightItemBox"
								:class="{ showRightItemBox: isShowSubNav }">
								<view class="item">
									<view class="radio">
										<radio class="radioSize" value="" /><text>小轿车</text>
									</view>
									<view class="priceText">￥<text>40</text></view>
									<view class="getButton"><text class="getButtonText">抢购</text></view>
								</view>
								<view class="item">
									<view class="radio">
										<radio class="radioSize" value="" /><text>越野/SUV</text>
									</view>
									<view class="priceText">￥<text>50</text></view>
									<view class="getButton"><text class="getButtonText">抢购</text></view>
								</view>
								<view class="item">
									<view class="radio">
										<radio class="radioSize" value="" /><text>商务/MPV</text>
									</view>
									<view class="priceText">￥<text>80</text></view>
									<view class="getButton"><text class="getButtonText">抢购</text></view>
								</view>
							</radio-group>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 底部固定 -->
		<view class="bottomFixed">
			<view class="bottomFixedBox">
				<!-- 用户勾选好的所有服务项列表 -->
				<view class="checkList">
					<!-- 右上角数字 -->
					<view class="totalNum"> 3 </view>
				</view>
				<view class="rightBotton">
					<view class="rightBottonText">
						<view class="rightBottonTextTop"> ￥25 </view>
						<view class="rightBottonTextBottom"> ￥50 </view>
					</view>
					<view class="buyButton"> 立即购买 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowSubNav: false,
				server_list: ["洗车", "保养", "美容", "轮胎", "钣金维修"],
				checkedNum: 0,
			};
		},
		methods: {
			showSubNav() {
				this.isShowSubNav = !this.isShowSubNav;
			},
		},
	};
</script>

<style scoped>
	.washService {
		min-height: 120vh;
	}

	.storeImgBox {
		height: 400rpx;
	}

	.storeImg {
		width: 100%;
		height: 100%;
	}

	.storeTextInfo {
		padding: 20rpx 0rpx;
		width: 690rpx;
		margin: 0 auto;
	}

	.storeTitle {
		display: flex;
		justify-content: space-between;
		line-height: 50rpx;
	}

	.storeName {
		font-size: 40rpx;
		font-weight: bold;
	}

	.storeTime {
		line-height: 67rpx;
		color: gray;
	}

	.storeIntro {
		display: flex;
		justify-content: space-between;
	}

	.storeEvaluateAndInstance {
		width: 480rpx;
		color: gray;
		font-size: 28rpx;
	}

	.servicePoints {
		font-size: 40rpx;
		color: red;
		font-weight: bold;
	}

	.marLeft {
		margin-left: 10rpx;
	}

	.line {
		font-weight: bold;
		font-size: 26rpx;
		margin: 0rpx 5rpx;
	}

	.addressAndTel {
		width: 160rpx;
		display: flex;
		justify-content: space-between;
	}

	.addressIcon {
		width: 60rpx;
		height: 60rpx;
		margin-top: 25rpx;
		background: url(../../static/img-maoao/icons/dingwei.png) no-repeat;
		background-size: 100%;
	}

	.telIcon {
		width: 60rpx;
		height: 60rpx;
		margin-top: 25rpx;
		background: url(../../static/img-maoao/icons/dianhua.png) no-repeat;
		background-size: 100%;
	}

	.carInfoBox {
		width: 690rpx;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
	}

	.carImg {
		width: 130rpx;
		background-color: red;
		background: url(../../static/img-maoao/images/qiche.png) no-repeat left center;
		background-size: 85%;
	}

	.carText {
		width: 430rpx;
		line-height: 50rpx;
	}

	.carName {
		font-weight: bold;
		font-size: 34rpx;
	}

	.carType {
		font-size: 28rpx;
		color: gray;
	}

	.changeCar {
		width: 130rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.changeCarImg {
		width: 45rpx;
		height: 45rpx;
		vertical-align: middle;
	}

	.changeCarText {
		vertical-align: middle;
		font-size: 32rpx;
		color: gray;
	}

	.serviceList {}

	.serviceListBox {
		width: 690rpx;
		margin: 0 auto;
	}

	.navs {
		width: 450rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0rpx;
	}

	.navsText {
		/* width: 200rpx; */
		font-size: 30rpx;
		font-weight: bold;
		/* line-height: ; */
		text-align: center;
		padding: 15rpx;
		border-radius: 30rpx;
		background-color: yellow;
		color: #00a0ff;
		background-color: #e1f6ff;
	}

	.serviceContent {
		display: flex;
	}

	.leftList {
		width: 200rpx;
		border-right: 2rpx solid lightgray;
	}

	.leftListItem {
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 35rpx;
		color: rgb(124, 124, 124);
	}

	.titleChecked {
		font-weight: bold;
		color: black;
		border-left: 8rpx solid #ff3f40;
	}

	.rightSelector {
		width: 490rpx;
	}

	.rightList {
		position: relative;
		height: 70rpx;
		line-height: 70rpx;
	}

	.rightListBox {
		display: flex;
		justify-content: space-between;
	}

	.rightListText {
		font-size: 35rpx;
		font-weight: bold;
		margin-left: 15rpx;
	}

	.rightListIcon {
		font-size: 35rpx;
		margin-right: 10rpx;
		transition: all 0.3s;
	}

	.rightListIconTransform {
		transform: rotate(90deg);
	}

	.rightItemBox {
		width: 100%;
		height: 0rpx;
		overflow: hidden;
		position: absolute;
		top: 70rpx;
		left: 0rpx;
		transition: all 0.3s;
		/* display: none; */
	}

	.showRightItemBox {
		/* top: 100rpx;
	left: 0rpx; */
		height: 210rpx;
		overflow: auto;
		/* display: block; */
	}

	.item {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.radio {
		width: 280rpx;
		font-size: 30rpx;
	}

	.radioSize {
		transform: scale(0.7);
	}

	.priceText {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff3f40;
	}

	.getButton {
		margin-right: 15rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.getButtonText {
		display: inline-block;
		background-color: #ff3f40;
		margin-top: 15rpx;
		height: 45rpx;
		line-height: 45rpx;
		width: 85rpx;
		color: white;
		text-align: center;
		border-radius: 10rpx;
	}

	/* 底部固定开始 */
	.bottomFixed {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 750rpx;
	}

	.bottomFixedBox {
		width: 690rpx;
		height: 120rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.checkList {
		width: 80rpx;
		height: 80rpx;
		margin-top: 24rpx;
		position: relative;
		background: url(../../static/img-maoao/icons/xiangmu.png) no-repeat center;
		background-size: 100%;
	}

	.totalNum {
		width: 50rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ff3f40;
		border-radius: 10rpx;
		position: absolute;
		top: -17rpx;
		right: -25rpx;
		box-sizing: content-box;
		border: 1px solid #ff3f40;
		background-color: white;
	}

	.rightBotton {
		display: flex;
	}

	.rightBottonText {
		height: 80rpx;
		margin-top: 20rpx;
		width: 180rpx;
		text-align: center;
	}

	.rightBottonTextTop {
		font-size: 40rpx;
		color: #ff3f40;
		font-weight: bold;
	}

	.rightBottonTextBottom {
		font-size: 28rpx;
		text-decoration: line-through;
		color: gray;
	}

	.buyButton {
		height: 80rpx;
		margin-top: 24rpx;
		width: 220rpx;
		font-size: 37rpx;
		font-weight: bold;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #ff3f40;
		color: white;
	}
</style>
